<template>
  <div class="content">
    <div class="group" v-if="tab">
      <div
        :class="btnActived == index + 1 ? 'active' : ''"
        @click="_tabClick(item, index + 1)"
        v-for="(item, index) in tabList"
        :key="index"
      >
        {{ item }}
      </div>
    </div>
    <div class="rank-content" :id="id" :data="data" v-if="show"></div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String
    },
    chartTitle: {
      type: Object
    },
    data: {
      type: Array,
      default: () => {
        return []
      }
    },
    color: {
      type: Array,
      default: () => {
        return ['#0DE8FB', '#0E6DE9', '#F4CD28', '#499A6F', '#A3D804', '#DE6B00']
      }
    },
    legend: {
      type: Boolean,
      default: false
    },
    tab: {
      type: Boolean,
      default: false
    },
    tabList: {
      type: Array,
      default: () => {
        return ['7天', '一个月']
      }
    },
    legendPositon: {
      type: [String, Number],
      default: 'center'
    },
    legendData: {
      type: Array,
      default: () => {
        return []
      }
    },
    xdata: {
      type: Array,
      default: () => {
        return []
      }
    },
  },
  data() {
    return {
      id: '',
      btnActived: 1,
      show: true
    }
  },
  created() {
    this.id = 'rankVerBar-' + Math.random()
  },
  mounted() {
    this.$nextTick(() => {
      this._initBar()
      let $this = this
      window.onresize = function() {
        $this.chart.resize()
      }
    })
  },
  updated() {
    this.$nextTick(() => {
      this._initBar()
    })
  },
  methods: {
    _tabClick(name, index) {
      this.btnActived = index
      this.$emit('tab-click', name)
    },
    _initBar() {
      let itemFontSize = document.documentElement.clientHeight * 0.013
      let option = {
        color: this.color,
            title: {
                text: ''
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: this.legendData,
                type: 'scroll',
                icon: 'roundRect',
                x: this.legendPositon,
                top: 5,
                // show: this.legend,
                pageIconColor: '#fff',
                pageTextStyle: {
                  color: '#fff'
                },
                textStyle: {
                  color: '#000',
                  // fontSize: itemFontSize
                },
                itemWidth: itemFontSize,
                itemHeight: itemFontSize
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#333',
                        width: 1,
                        type: 'solid'
                    }
                },
                boundaryGap: false,
                data: this.xdata
            },
            yAxis: {
                type: 'value',
                axisLine: {
                    show: false
                },
                axisLabel: {
                  color: '#000',
                  fontSize: itemFontSize
                },
                //强制显示全部X轴数据
                // axisLabel: {
                //     interval: 1
                // },
                minInterval: 1,
                splitLine: {
                    lineStyle: {
                        color: '#ccc',
                        type: 'dashed',
                        width: 1,
                    }
                },
                axisLine: {
                  lineStyle: {
                    color: '#7389B9'
                  }
                },
                axisTick: {
                    show: false,
                }
            },
            series: this.data
      }
      let documentChart = document.getElementById(this.id);
      if (documentChart) {
        this.chart = this.$echarts.init(documentChart);
        this.chart.setOption(option);
      }
      window.addEventListener('resize', () => {
        itemFontSize = document.documentElement.clientHeight * 0.013 > 14 ? 13 : document.documentElement.clientHeight
        this.chart.resize()
        // this.show = false
        // setTimeout(() => {
        //   this.show = true
        // }, 300)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.content {
  display: flex;
  flex-flow: column;

  .group {
    display: flex;
    padding: 10px;

    div {
      width: 9.722vh;
      height: 2.777vh;
      display: flex;
      justify-content: center;
      align-items: center;
      // background-image: url(../../../assets/daping/components/defaultBtn.png);
      -webkit-background-size: 100% 100%;
      background-size: 100% 100%;
      font-size: 1.48vh;
      color: #fff;
      cursor: pointer;
      margin-right: 20px;
    }

    .active {
      // background-image: url(../../../assets/daping/components/activeBtn.png);
      color: #000;
      font-weight: bold;
    }
  }

  .rank-content {
    width: 100%;
    flex: 1;
  }
}
</style>
